<template>
  <div class="index">
    <div id="header">
      <div id="nav-top">
        <div id="topleft"></div>
        <!-- 登录的显示和隐藏 -->
        <div id="topright">
          <div v-if="token=='y'" id="showuser" class="show">欢迎,{{tel}}</div>
          <div v-else class="show">
            <router-link to="/login">
              <i style="color:rgb(252, 227, 2)">登录</i>
            </router-link>
            <i>/</i>
            <router-link to="/register">
              <i style="color:rgb(252, 227, 2)">注册</i>
            </router-link>
          </div>
        </div>
        <!-- 注销 -->
        <i id="logout" v-if="token=='y'" class="el-icon-switch-button" @click="logout()" title="退出"></i>
      </div>
      <el-row>
        <!-- 移动端导航 -->
        <el-collapse class="hidden-md-only hidden-sm-only hidden-lg-only">
          <el-collapse-item title="导航" name="1">
            <div id="nav2">
              <router-link to="/index/home" active-class="index_active">
                <span>首页</span>
              </router-link>
              <a href="#topheader">
                <span>热门推荐</span>
              </a>
              <router-link to="/index/carlist">
                <span>我要租车</span>
              </router-link>
              <router-link to="/index/activity">
                <span>活动社区</span>
              </router-link>
              <!-- <router-link to="/">
                <span>关于我们</span>
              </router-link> -->
              <router-link to="/index/person">
                <span>个人中心</span>
              </router-link>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 导航 -->
        <div id="nav" class="hidden-xs-only">
          <el-col :sm="9">
            <span class="hidden-xs-only" style="border:0px">
              <img src="../assets/GYQ/logo.png" style="position: relative;right:20%;height:80px" />
            </span>
          </el-col>
          <router-link to="/index/home">
            <el-col :sm="3">
              <span>首页</span>
            </el-col>
          </router-link>
          <a href="#topheader">
            <el-col :sm="3">
              <span>热门推荐</span>
            </el-col>
          </a>
          <router-link to="/index/carlist">
            <el-col :sm="3" :xs="24">
              <span>我要租车</span>
            </el-col>
          </router-link>
          <router-link to="/index/activity">
            <el-col :sm="3">
              <span>活动社区</span>
            </el-col>
          </router-link>
          <!-- <router-link to="/">
            <el-col :sm="3">
              <span>关于我们</span>
            </el-col>
          </router-link>-->
          <router-link to="/index/person">
            <el-col :sm="3">
              <span>个人中心</span>
            </el-col>
          </router-link>
        </div>
      </el-row>
    </div>
    <!-- 返回顶部 -->
    <el-backtop :bottom="100" id="toptop">up</el-backtop>
    <router-view></router-view>
    <div id="footer"></div>
  </div>
</template>

<script>
import jwt_decode from "jwt-decode";
export default {
  data() {
    return {
      token: "",
      tel: "",
      toptop: 70,
      position: "fixed",
      boxShadow: "5px 3px 11px #b9aeae",
      top: 0,
      left: 0
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
  },
  inject: ["reload"],
  methods: {
    handleScroll() {
      var top = document.documentElement.scrollTop;
      var nav = document.getElementById("nav");
      if (top >= this.toptop) {
        nav.style.position = this.position;
        nav.style.boxShadow = this.boxShadow;
        nav.style.top = this.top;
        nav.style.left = this.left;
      } else {
        document.getElementById("nav").style = "";
      }
    },
    logout() {
      (this.token = ""), localStorage.removeItem("mytoken");
      this.reload();
    }
  },

  created() {
    let tokenIsExists = localStorage.getItem("mytoken");
    if (tokenIsExists) {
      this.token = "y";
      let tel = jwt_decode(tokenIsExists).userTel;
      this.tel = tel;
    }
  }
};
</script>
<style scoped>
.index_active {
  border-bottom: 3px solid rgb(252, 227, 2);
}
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: black;
}
#toptop {
  background-color: #2a2c2cbe;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: #1989fa;
  text-align: center;
}
#nav-top {
  width: 100%;
  height: 45px;
  background-color: #0c0b0b;
  line-height: 60px;
}
#nav,
#nav2 {
  width: 100%;
  z-index: 20;
  text-align: center;
}

span {
  height: 90px;
  width: 100%;
  float: left;
  line-height: 90px;
  font-size: 15px;
  text-align: center;
  background-color: white;
  letter-spacing: 3px;
}
#nav span:hover {
  border-bottom: 3px solid rgb(252, 227, 2);
}

#nav2 span {
  margin: 0 5%;
  height: 40px;
  width: 90%;
  border-bottom: 1px solid rgba(199, 194, 194, 0.479);
  line-height: 40px;
  font-size: 14px;
  letter-spacing: 3px;
}
#topleft {
  width: 75%;
  height: 100%;
  float: left;
}
#topright {
  width: 20%;
  height: 100%;
  float: left;
}
.show {
  color: rgb(255, 254, 254);
  width: 100%;
  height: 100%;
  text-align: right;
  font-size: 3px;
}
#logout {
  right: 30px;
  top: 20px;
  position: absolute;
  color: white;
  font-size: 20px;
}
a {
  text-decoration: none;
  color: black;
}

#footer {
  width: 100%;
  height: 200px;
  background-color: #161313;
  float: left;
}
@media (max-width: 769px) {
  #showuser {
    display: none;
  }
}
</style>
